<template>
	<view class="container">
		<view class="header">
			<text class="title">创建企业</text>
		</view>

		<view class="content">
			<text class="subtitle">企业用户入驻智运货主平台模式</text>

			<view class="mode-container">
				<!-- 模式一 -->
				<view class="mode-item" >
					<view class="mode-radio">
						<view class="radio-icon" :class="{'active': activeMode === 1}"></view>
					</view>
					<view class="mode-content">
						<text class="mode-title">模式一（平台承运）</text>
						<text class="mode-desc">合同+平台物流模式，支持多个结算主体，平台承运模式由平台承担您的货物运输，提供限时保量承运服务等。</text>
						<text class="mode-tip">选择此模式在认证完成后，平台客服会与您联系进行承运合同签定等相关事宜的沟通。</text>
					</view>
				</view>

				<!-- 模式二 -->
				<view class="mode-item" >
					<view class="mode-radio">
						<view class="radio-icon" :class="{'active': activeMode === 2}"></view>
					</view>
					<view class="mode-content">
						<text class="mode-title">模式二（非平台承运）</text>
						<text class="mode-desc">您做为货主自行在货平台发货，平台不承运，不保证有司机抢单，不保证您的货物限时保量完成运输服务。</text>
					</view>
				</view>
			</view>

			<view class="footer">
				<button class="next-btn" @click="goToNext">下一步</button>
			</view>

			<view class="note">
				<text>注：企业认证完成后，企业与平台合作模式不可修改，如需帮助请联系平台客服。</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		http
	} from '../../../config/request.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		useuser
	} from '../../../stores/user.js';
	const user = useuser();
	const activeMode = ref(1) // 默认选中模式一

	const peizhi = async () => {
		const res = await http({
			url: '/shipperConfig/select/' + user.user.id,
			method: 'GET',
		});
		console.log('配置信息');
		console.log(res);
		if (res.code === 20041) {
			const mode = res.shuju.cooperationmode
			// 根据配置内容判断模式
			if (mode === 1) {
				activeMode.value = 1
			} else if (mode === 2) {
				activeMode.value = 2
			} else {
				activeMode.value = 1 // 默认
			}
		} else {
			uni.showToast({
				title: '货源配置获取失败',
				icon: 'none',
			});
		}
	}

	const goToNext = () => {
		// 跳转到认证页面，并传递选择的模式
		uni.navigateTo({
			url: `/pages/my/pageinfo/Verification?mode=${activeMode.value}`
		})
	}
	onLoad(() => {
		peizhi()
	})
</script>

<style lang="scss">
	page {
		background-color: #002fa7;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #002fa7;
	}

	.header {
		height: 50rpx;
		width: 100%;
		padding: 40rpx 0 30rpx;
		background-color: #002fa7;
		margin-left: 0px;
	}

	.header image {
		margin-left: 25rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #ffffff;
		margin-left: 52rpx;
	}

	.content {
		width: 100%;
		padding-bottom: 0px;
		background-color: #eeeeee;
		border-radius: 25rpx 25rpx 0 0;
		flex: 1;
	}

	.subtitle {
		margin: 30rpx 0 0 30rpx;
		font-size: 28rpx;
		color: #002fa7;
		margin-bottom: 40rpx;
		display: block;
	}

	.mode-item {
		display: flex;
		background-color: #fff;
		margin-left: 25rpx;
		margin-right: 25rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.mode-radio {
		margin-right: 20rpx;
		display: flex;
		align-items: flex-start;
		padding-top: 8rpx;
	}

	.radio-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		position: relative;
	}

	.radio-icon.active {
		border-color: #002fa7;
	}

	.radio-icon.active::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background-color: #002fa7;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.mode-content {
		flex: 1;
	}

	.mode-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.mode-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 15rpx;
		display: block;
	}

	.mode-tip {
		font-size: 24rpx;
		color: #686868;
		line-height: 1.5;
		display: block;
	}

	.note {
		font-size: 24rpx;
		color: #ff0000;
		line-height: 1.5;
		margin: 0 30rpx 0 30rpx;
	}

	.footer {
		padding: 30rpx 0;
		text-align: center;
	}

	.next-btn {
		background-color: #002fa7;
		color: #fff;
		border-radius: 10rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		width: 92%;
	}
</style>